<template>
  <div>
    <el-dialog
        title="终端"
        :visible.sync="dialogFormVisible"
        width="70%"
        @close="evClose"
        :close-on-click-modal="false"
    >
      <div id="terminal" ref="terminal"></div>
    </el-dialog>
  </div>
</template>

<script>
import {Terminal} from "xterm"
import {FitAddon} from 'xterm-addon-fit'
import "xterm/css/xterm.css"
import {SendCommand} from "@/../wailsjs/go/main/App"

export default {
  data() {
    return {
      term: "", // 保存terminal实例
      //终端的字符串
      terminal: "", //保存终端字符串
      dialogFormVisible: false,
      ip: ""
    }
  },
  created() {
    //接收指令
    window.runtime.EventsOn("message", (data) => {
      this.term.write(data)
      this.term.prompt()
    })
  },
  mounted() {

  },
  methods: {
    showDialog(ip) {
      if (ip === "") {
        return
      }
      this.term = ""
      this.terminal = ""
      this.ip = ip
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.initXterm()
      })
    },
    initXterm() {
      const term = new Terminal({
        cursorBlink: true, //光标闪烁
        theme: {
          foreground: "#ECECEC", //字体
          background: "#000000", //背景色
          cursor: "help", //设置光标
          lineHeight: 20
        }
      });
      const fitAddon = new FitAddon();
      // 创建terminal实例
      term.open(this.$refs["terminal"])
      // 换行并输入起始符 $
      term.prompt = _ => {
        term.write("\r\n\x1b[33m$\x1b[0m ")
      }
      term.prompt()
      term.loadAddon(fitAddon);
      fitAddon.fit();

      window.onresize = function () { // 窗口尺寸变化时，终端尺寸自适应
        fitAddon.fit();
      };

      this.term = term
      //初始化
      this.runFakeTerminal()
    },
    runFakeTerminal() {
      let term = this.term
      // 初始化
      term._initialized = true
      term.writeln('web xterm terminal')
      term.prompt()

      let that = this

      // 添加事件监听器，支持输入方法
      term.onKey(e => {
        const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey
        if (e.domEvent.keyCode === 13) { //回车
          this.onEnter()
        } else if (e.domEvent.keyCode === 8) { // back 删除的情况
          if (term._core.buffer.x > 2) {
            term.write('\b \b')
          }
        } else if (printable) {//输入字母
          term.write(e.key)
          that.terminal = that.terminal + e.key
        }
      })
      term.onData(key => {  // 粘贴的情况
        if (key.length > 1) {
          term.write(key)
          that.terminal = that.terminal + key
        }
      })
    },
    //回车事件触发
    onEnter() {
      if (this.terminal !== "") {
        SendCommand(this.ip, this.terminal).then(res => {
          console.log("res", res)
        }).catch(err => {
          console.log("err", err)
        })
      }
      this.terminal = ""
      this.term.prompt()
    },
    close(ip) {
      if (this.ip === ip) {
        this.term.dispose()
        this.dialogFormVisible = false
      }
    },
    evClose() {
      this.term.dispose()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style>

</style>
